<template>
	<view class="app_boos">
		<view class="app_top"><uni-nav-bar :border="false" @clickLeft="tran_back" left-icon="left" title="转岗申请"></uni-nav-bar></view>
		<!-- 灰色bj -->
		<view class="tran-ash">
			<uni-collapse>
				<uni-collapse-item :open="true" :show-animation="true" title="发起人信息">
					<slot></slot>
					<view class="tran-select">
						<view class="tran-line">
							<text>流水号</text>
							<text>{{ ls }}</text>
						</view>
						<view class="tran-line">
							<text>姓名</text>
							<text>{{ information.name }}</text>
						</view>
						<view class="tran-line">
							<text>部门</text>
							<text>{{ information.department_name }}</text>
						</view>
						<view class="tran-line">
							<text>岗位</text>
							<text>{{ information.post_name }}</text>
						</view>
						<view class="tran-line">
							<text>发起时间</text>
							<text>{{ applytime }}</text>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>

			<!-- 转岗 -->
			<uni-collapse>
				<uni-collapse-item :open="true" :show-animation="true" title="转岗信息">
					<view class="tran-select">
						<view class="tran-line">
							<text>
								<text class="red">*</text>
								新部门
							</text>
							<picker @change="bindPickerChange" :value="index" :range="array">
								<text class="uni-input">{{ array[index] }}</text>
							</picker>
							<uni-icons type="forward" size="15" color="#999"></uni-icons>
						</view>

						<view class="tran-line">
							<text>
								<text class="red">*</text>
								新岗位
							</text>
							<picker @change="bindPickerChange2($event, array2[index2].post_name)" :value="index2" :range="array2" :range-key="'post_name'">
								<text class="uni-input">{{ array2[index2].post_name }}</text>
							</picker>
							<uni-icons type="forward" size="15" color="#999"></uni-icons>
						</view>

						<view id="tran-zhuan" class="tran-line">
							<text>
								<text class="red">*</text>
								转岗原因
							</text>
							<textarea v-model="zhuangang" placeholder="转岗原因" />
						</view>
						<!-- 
						<view id="tran-fujian" class="tran-line">
							<text>附件</text>
							<uni-file-picker limit="1" file-mediatype="all"></uni-file-picker>
						</view> -->
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>

		<!-- 按钮 -->
		<view class="tran-btn">
			<button type="default" @click="tran_Submit">提交</button>
			<button type="default" @click="go_return">返回</button>
		</view>
	</view>
</template>

<script>
import { reactive, toRefs, onMounted, watch, computed, onUpdated, onBeforeUpdate } from 'vue';
import { useStore, mapState } from 'vuex';
import http from '../../utils/http.js';
import clock from '../../utils/apply_leave.js';
export default {
	setup() {
		const store = useStore();
		let data = reactive({
			// 发起时间
			applytime: '',
			// 当前人信息
			information: store.state.liujinchang.user,
			//流水号
			ls: '',
			// 转岗
			zhuangang: '',
			// 选择部门
			array: ['请选择'],
			bumen: '',
			index: 0,
			bindPickerChange: function(e) {
				data.index = e.detail.value;
				if (data.index == '1') {
					data.bumen = '人事部';
				} else if (data.index == '2') {
					data.bumen = '行政部';
				} else if (data.index == '3') {
					data.bumen = '财务部';
				} else if (data.index == '4') {
					data.bumen = '销售部';
				} else if (data.index == '5') {
					data.bumen = '市场部';
				}

				http({
					url: '/zhangXi/bumenArray',
					data: {
						bumen: data.bumen
					}
				}).then(res => {
					console.log(res.data.data);
					data.index2 = 0;
					data.array2.splice(1, data.array2.length);
					res.data.data.forEach(i => {
						data.array2.push(i);
					});
				});
			},
			// 选择岗位
			array2: [{ post_name: '请选择' }],
			index2: 0,
			gangwei: '',
			bindPickerChange2: function(e, v) {
				this.index2 = e.detail.value;
				data.gangwei = data.array2[data.index2];
			},
			// 返回我的消息
			tran_back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 提交
			tran_Submit() {
				// 流水
				let nowdate = new Date();
				let date = new Date();
				//年 getFullYear()：四位数字返回年份
				let year = date.getFullYear(); //getFullYear()代替getYear()
				//月 getMonth()：0 ~ 11
				let month = date.getMonth() + 1;
				//日 getDate()：(1 ~ 31)
				let day = date.getDate();
				//时 getHours()：(0 ~ 23)
				let hour = date.getHours();
				//分 getMinutes()： (0 ~ 59)
				let minute = date.getMinutes();
				//秒 getSeconds()：(0 ~ 59)
				let second = date.getSeconds();
				let applytime = +year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				applytime=clock(applytime)
				if (data.zhuangang != '') {
					http({
						url: '/zhangXi/addPost',
						method: 'POST',
						data: {
							mun: data.ls /* 流水号 */,
							type: 5 /* 转岗申请 */,
							state: '待审核' /* 审核*/,
							audit: data.information.work_id /* 提交人id */,
							content: this.zhuangang /* 原因 */,
							applytiem: applytime /*, 申请时间 */,
							applyname: data.information.work_id /* 提交人id */,
							bewjbos: data.gangwei.post_id /* 新岗位 ID */,
							name_id:data.information.name /* 发起人姓名*/
						}
					}).then(res => {
						console.log(res);
						if(res.data.code==200){	
							uni.showModal({
								title: '提示',
								content: '申请成功是否返回上一页',
								success: function (res) {
									if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
									} 
								}
							});
						}
					});
					data.index = 0;
					data.index2 = 0;
					data.zhuangang = '';
				} else {
					console.log('请填写转岗原因');
				}
			},
			// bumen: computed(() => store.state.zhangxi.bumen),
			//返回
			go_return(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 获取部门
			bumenGet() {
				console.log('执行了');
				http({
					url: '/zhangXi/bumenGet',
					method: 'get'
				}).then(res => {
					if (res.data.code == 200) {
						res.data.data.forEach(i => {
							data.array.push(i.department_name);
						});
					}
				});
				// 获取流水
				http({
					url: '/zhangXi/lsGet'
				}).then(res => {
					if (res.data.code == 200) {
						data.ls = res.data.data[res.data.data.length - 1].mun;
						let a = data.ls.slice(2, data.ls.legnth);
						data.ls = 'LS' + (parseInt(a) + 1);
						console.log(data.ls);
					}
				});
			}
		});
		onMounted(() => {
			let nowdate = new Date();
			let date = new Date();
			//年 getFullYear()：四位数字返回年份
			let year = date.getFullYear(); //getFullYear()代替getYear()
			//月 getMonth()：0 ~ 11
			let month = date.getMonth() + 1;
			//日 getDate()：(1 ~ 31)
			let day = date.getDate();
			//时 getHours()：(0 ~ 23)
			let hour = date.getHours();
			//分 getMinutes()： (0 ~ 59)
			let minute = date.getMinutes();
			//秒 getSeconds()：(0 ~ 59)
			let second = date.getSeconds();
			let time = +year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
			data.applytime= clock(time)

			data.bumenGet();
		});
		return { ...toRefs(data) };
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.red {
	color: red;
}

.app_boos {
	height: 100%;
	background: rgb(242, 242, 242);
}
.app_top {
	z-index: +1;
	width: 100%;
	position: fixed;
	top: 0;
	.uniui-left {
		color: rgb(45, 140, 240) !important;
	}

	.uni-nav-bar-text {
		color: #333 !important;
		font-size: 36rpx !important;
	}
}
.tran_box {
	height: 100%;
}
.tran-ash {
	// box-sizing: border-box;
	background: rgb(242, 242, 242);
	padding: 70rpx 30rpx 120rpx 30rpx;
	uni-collapse {
		padding: 5upx;
		border-radius: 10px;
	}

	.uni-collapse-item {
		border-radius: 50px;
	}

	// 四边圆角
	.uni-collapse,
	.uni-collapse-item__title-box,
	.uni-collapse-item__wrap {
		border-radius: 15rpx !important;
	}

	.tran-select {
		height: 100%;
		box-sizing: border-box;
		padding: 0 25rpx;
		.tran-line:nth-child(1) {
			border-top: 1px solid rgb(242, 242, 242);
		}
		.tran-line {
			padding: 25rpx 0;
			border-bottom: 1px solid rgb(242, 242, 242);
			display: flex;
			align-items: center;
			font-size: 28rpx;
			// justify-content: space-between;

			text:nth-child(1) {
				flex: 1.1;
			}

			uni-icons:nth-child(3) {
				flex: 0.2;
			}

			text:nth-child(2) {
				color: #999;
				flex: 2;
			}

			picker:nth-child(2) {
				color: #999;
				flex: 2;
			}

			uni-section {
				flex: 2;
			}
		}
	}
}
#tran-zhuan {
	display: flex;
	align-items: flex-start;

	text:nth-child(1) {
		flex: 1;
	}

	textarea:nth-child(2) {
		flex: 2;
		border: 1px solid #ccc;
		height: 160rpx;
	}
}

#tran-fujian {
	display: flex;
	justify-content: space-around;
	padding: 30rpx;
	height: 120rpx;
	text {
		flex: 1;
	}

	uni-file-picker {
		flex: 2;

		button {
			background: rgb(45, 140, 240);
		}
	}
}

.tran-btn {
	position: fixed;
	bottom: 0;
	background: #fff;
	display: flex;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	justify-content: space-between;

	button {
		width: 340rpx;
		height: 88rpx;
		flex: 1;
	}
	button:nth-child(1) {
		margin: 0 15rpx 0 0;
		background: #2d8cf0;
		color: #fff;
	}
	button:nth-child(2) {
		margin: 0 0 0 15rpx;
		margin: 0 15rpx 0 0;
		background: #2d8cf0;
		color: #fff;
	}
}
</style>
